Fix accessibility of icon-only buttons in ConversationsSidebar by Dexploarer · Pull Request #155 · Dexploarer/milaidy

Dexploarer · 2026-02-27T22:57:54Z

🎨 Palette: ConversationsSidebar Accessibility Improvements

💡 What:

Added a dynamic aria-label (Delete conversation: ${conv.title}) to the conversation delete button.
Wrapped the visual × and × characters in the conversation delete and mobile close buttons with .

🎯 Why:
Screen readers would previously announce the × character as "times" or "multiplication", which is confusing when it's meant to indicate a "close" or "delete" action. Adding a descriptive aria-label and hiding the visual character from assistive technologies ensures a clearer and more intuitive experience for users relying on screen readers.

♿ Accessibility:

Ensures icon-only buttons are properly labeled.
Prevents redundant or incorrect character announcements by screen readers.

PR created automatically by Jules for task 10738356709196740085 started by @Dexploarer

…idebar - Added descriptive `aria-label` to the "Delete conversation" button. - Wrapped the visual `×` and `×` characters in `` to prevent confusing screen reader announcements.

google-labs-jules · 2026-02-27T22:57:55Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

coderabbitai · 2026-02-27T22:58:01Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/a11y-conversations-sidebar-buttons-10738356709196740085

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codereviewbot-ai · 2026-02-27T22:58:03Z

apps/app/src/components/ConversationsSidebar.tsx

@@ -119,7 +119,7 @@ export function ConversationsSidebar({
            onClick={onClose}


The onClick={onClose} handler assumes that onClose is always defined, but the prop is optional. This could result in a runtime error if onClose is not provided. To improve robustness, use a conditional invocation: onClick={onClose ?? (() => {})} or onClick={() => onClose?.()}.

codereviewbot-ai · 2026-02-27T22:58:03Z

apps/app/src/components/ConversationsSidebar.tsx

                          setConfirmDeleteId(conv.id);
                        }}


The current logic allows multiple conversations to enter the 'confirm delete' state if the user clicks delete on several items in quick succession. This can lead to a confusing user experience. Consider restricting the confirmation state to a single conversation at a time, or disabling other delete buttons while one is active.

gemini-code-assist · 2026-02-27T22:58:05Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the accessibility of icon-only buttons within the ConversationsSidebar component. By providing explicit labels for screen readers and ensuring that purely decorative characters are ignored, the changes make the interface more intuitive and navigable for users relying on assistive technologies, addressing potential confusion caused by ambiguous button content.

Highlights

Accessibility Improvement: Enhanced screen reader experience for icon-only buttons in the ConversationsSidebar by adding descriptive aria-label attributes and hiding purely visual characters from assistive technologies.
Dynamic aria-label: Implemented a dynamic aria-label for the conversation delete button, providing specific context like 'Delete conversation: [conversation title]'.
aria-hidden for visual characters: Wrapped the '×' and '×' characters in both the mobile close and conversation delete buttons with  to prevent misinterpretation by screen readers.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

apps/app/src/components/ConversationsSidebar.tsx
- Wrapped the '×' character in the mobile close button with .
- Added a dynamic aria-label to the conversation delete button, providing context like 'Delete conversation: [conversation title]'.
- Wrapped the '×' character in the conversation delete button with .

Activity

No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request improves the accessibility of icon-only buttons in the ConversationsSidebar by adding descriptive aria-label attributes and hiding decorative icons from screen readers. The changes are well-implemented and follow accessibility best practices. I have one suggestion to further improve usability for mouse users by making a button's title attribute dynamic to match its aria-label.

gemini-code-assist · 2026-02-27T22:59:28Z

apps/app/src/components/ConversationsSidebar.tsx

                          setConfirmDeleteId(conv.id);
                        }}
                        title="Delete conversation"
+                        aria-label={`Delete conversation: ${conv.title}`}


This is a great addition for screen reader users. For consistency and to provide better context to mouse users via the tooltip, consider also making the title attribute on the previous line dynamic to match this aria-label:

title={`Delete conversation: ${conv.title}`}

fix(ui): improve accessibility of icon-only buttons in ConversationsS…

fe2bbc7

…idebar - Added descriptive `aria-label` to the "Delete conversation" button. - Wrapped the visual `×` and `×` characters in `` to prevent confusing screen reader announcements.

codereviewbot-ai bot reviewed Feb 27, 2026

View reviewed changes

github-actions bot added the ui label Feb 27, 2026

gemini-code-assist bot reviewed Feb 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix accessibility of icon-only buttons in ConversationsSidebar#155

Fix accessibility of icon-only buttons in ConversationsSidebar#155
Dexploarer wants to merge 1 commit intomainfrom
fix/a11y-conversations-sidebar-buttons-10738356709196740085

Dexploarer commented Feb 27, 2026

Uh oh!

google-labs-jules bot commented Feb 27, 2026

Uh oh!

coderabbitai bot commented Feb 27, 2026

Review skipped

Uh oh!

codereviewbot-ai bot Feb 27, 2026

Uh oh!

codereviewbot-ai bot Feb 27, 2026

Uh oh!

gemini-code-assist bot commented Feb 27, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		@@ -119,7 +119,7 @@ export function ConversationsSidebar({
		onClick={onClose}

Conversation

Dexploarer commented Feb 27, 2026

Uh oh!

google-labs-jules bot commented Feb 27, 2026

Uh oh!

coderabbitai bot commented Feb 27, 2026

Review skipped

Uh oh!

codereviewbot-ai bot Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

codereviewbot-ai bot Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot commented Feb 27, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant